<div class="box box-solid box-primary">
    <div class="box-header with-border">
        <h3 class="box-title">{{modal.header}}</h3>
    </div>
    <!-- /.box-header -->
    <!-- form start -->
    <form class="form-horizontal" name="appForm">
        <div class="box-body">
            <div class="form-group has-feedback" ng-class="{'has-success' : !appForm.code.$pristine && appForm.code.$valid,
            'has-error' : !appForm.code.$pristine && appForm.code.$invalid}">
                <label for="code" class="col-sm-2 control-label">AppCode</label>

                <div class="col-sm-8">
                    <input type="text" class="form-control" required ng-maxlength=20 ng-minlength=2
                           ng-model="modal.code" name="code"
                           id="code" placeholder="AppCode">

                    <div ng-show="!appForm.code.$pristine && appForm.code.$valid">
                        <span class="glyphicon glyphicon-ok form-control-feedback"></span><label class="control-label">验证通过</label>
                    </div>
                    <div ng-show="!appForm.code.$pristine && appForm.code.$invalid">
                        <span class="glyphicon glyphicon-remove form-control-feedback"></span><label class="control-label">AppCode必须大于2位并小于20位</label>
                    </div>
                </div>
            </div>
            <div class="form-group has-feedback" ng-class="{'has-success' : !appForm.name.$pristine && appForm.name.$valid,
            'has-error' : !appForm.name.$pristine && appForm.name.$invalid}">
                <label for="name" class="col-sm-2 control-label">应用名称</label>

                <div class="col-sm-8">
                    <input type="text" class="form-control" id="name" name="name" required ng-maxlength=12 ng-minlength=2
                           ng-model="modal.name" placeholder="应用名称">
                    <div ng-show="!appForm.name.$pristine && appForm.name.$valid">
                        <span class="glyphicon glyphicon-ok form-control-feedback"></span><label class="control-label">验证通过</label>
                    </div>
                    <div ng-show="!appForm.name.$pristine && appForm.name.$invalid"><label class="control-label">应用名称必须大于2位并小于20位</label>
                        <span class="glyphicon glyphicon-remove form-control-feedback"></span>
                    </div>
                </div>
            </div>
            <div class="form-group has-feedback" ng-class="{'has-success' : !appForm.description.$pristine && appForm.description.$valid,
            'has-error' : !appForm.description.$pristine && appForm.description.$invalid}">
                <label for="description" class="col-sm-2 control-label">应用描述</label>

                <div class="col-sm-8">
                    <input type="text" class="form-control" id="description" name="description" ng-maxlength=128
                           ng-model="modal.description" placeholder="应用描述">
                    <div ng-show="!appForm.description.$pristine && appForm.description.$valid">
                        <span class="glyphicon glyphicon-ok form-control-feedback"></span><label class="control-label">验证通过</label>
                    </div>
                    <div ng-show="!appForm.description.$pristine && appForm.description.$invalid"><label class="control-label">应用描述必须小于128位</label>
                        <span class="glyphicon glyphicon-remove form-control-feedback"></span>
                    </div>
                </div>
            </div>
            <div class="form-group has-feedback" ng-class="{'has-success' : !appForm.zkPath.$pristine && appForm.zkPath.$valid,
            'has-error' : !appForm.zkPath.$pristine && appForm.zkPath.$invalid}">
                <label for="zkPath" class="col-sm-2 control-label">zkPath</label>

                <div class="col-sm-8">
                    <input type="text" class="form-control" required ng-maxlength=20 ng-minlength=2
                           ng-model="modal.zkPath" name="zkPath"
                           id="zkPath" placeholder="zkPath">

                    <div ng-show="!appForm.zkPath.$pristine && appForm.zkPath.$valid">
                        <span class="glyphicon glyphicon-ok form-control-feedback"></span><label class="control-label">验证通过</label>
                    </div>
                    <div ng-show="!appForm.zkPath.$pristine && appForm.zkPath.$invalid">
                        <span class="glyphicon glyphicon-remove form-control-feedback"></span><label class="control-label">ZKPATH必须大于2位并小于6位</label>
                    </div>
                </div>
            </div>
            <div class="form-group has-feedback" ng-class="{'has-success' : !appForm.zkUserName.$pristine && appForm.zkUserName.$valid,
            'has-error' : !appForm.zkUserName.$pristine && appForm.zkUserName.$invalid}">
                <label for="zkUserName" class="col-sm-2 control-label">zkUserName</label>

                <div class="col-sm-8">
                    <input type="text" class="form-control" required ng-maxlength=12 ng-minlength=3
                           ng-model="modal.zkUserName" name="zkUserName"
                           id="zkUserName" placeholder="zkUserName">

                    <div ng-show="!appForm.zkUserName.$pristine && appForm.zkUserName.$valid">
                        <span class="glyphicon glyphicon-ok form-control-feedback"></span><label class="control-label">验证通过</label>
                    </div>
                    <div ng-show="!appForm.zkUserName.$pristine && appForm.zkUserName.$invalid">
                        <span class="glyphicon glyphicon-remove form-control-feedback"></span><label class="control-label">zkUserName必须大于3位并小于12位</label>
                    </div>
                </div>
            </div>
            <div class="form-group has-feedback" ng-class="{'has-success' : !appForm.zkPassWord.$pristine && appForm.zkPassWord.$valid,
            'has-error' : !appForm.zkPassWord.$pristine && appForm.zkPassWord.$invalid}">
                <label for="zkPassWord" class="col-sm-2 control-label">zkPassWord</label>

                <div class="col-sm-8">
                    <input type="text" class="form-control" required ng-maxlength=12 ng-minlength=3
                           ng-model="modal.zkPassWord" name="zkPassWord"
                           id="zkPassWord" placeholder="zkPassWord">

                    <div ng-show="!appForm.zkPassWord.$pristine && appForm.zkPassWord.$valid">
                        <span class="glyphicon glyphicon-ok form-control-feedback"></span><label class="control-label">验证通过</label>
                    </div>
                    <div ng-show="!appForm.zkPassWord.$pristine && appForm.zkPassWord.$invalid">
                        <span class="glyphicon glyphicon-remove form-control-feedback"></span><label class="control-label">zkPassWord必须大于3位并小于12位</label>
                    </div>
                </div>
            </div>
            <div class="box-footer col-sm-10">
                <button type="button" class="btn btn-default pull-left" data-dismiss="modal" ng-click="cancel()">
                    关闭
                </button>
                <button type="button" ng-disabled="!appForm.$valid" class="btn pull-right btn-primary" ng-click="ok()">
                    {{modal.btnName}}
                </button>
            </div>
        </div>
    </form>
</div>
